{% extends 'blog/base.html' %}

{% block title %}我的文章 - 个人博客{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-user-edit"></i> 我的文章</h2>
    <a href="{% url 'blog:post_create' %}" class="btn btn-primary">
        <i class="fas fa-plus"></i> 写新文章
    </a>
</div>

{% if posts %}
    <div class="row">
        {% for post in posts %}
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="card-title">
                            <a href="{{ post.get_absolute_url }}" class="text-decoration-none">
                                {{ post.title }}
                            </a>
                        </h5>
                        <span class="badge bg-{% if post.status == 'published' %}success{% else %}warning{% endif %}">
                            {{ post.get_status_display }}
                        </span>
                    </div>
                    
                    {% if post.excerpt %}
                    <p class="card-text text-muted">
                        {{ post.excerpt|truncatewords:20 }}
                    </p>
                    {% endif %}
                    
                    <div class="row text-muted small">
                        <div class="col-6">
                            <i class="fas fa-calendar"></i> {{ post.created_at|date:"Y-m-d" }}
                        </div>
                        <div class="col-6">
                            <i class="fas fa-eye"></i> {{ post.views }} 次浏览
                        </div>
                    </div>
                    
                    {% if post.category %}
                    <div class="mt-2">
                        <span class="badge bg-light text-dark">
                            <i class="fas fa-tag"></i> {{ post.category.name }}
                        </span>
                    </div>
                    {% endif %}
                </div>
                
                <div class="card-footer bg-transparent">
                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{{ post.get_absolute_url }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye"></i> 查看
                            </a>
                            <a href="{% url 'blog:post_edit' post.slug %}" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                        </div>
                        <small class="text-muted">
                            {% if post.published_at %}
                                发布于 {{ post.published_at|date:"m-d H:i" }}
                            {% else %}
                                未发布
                            {% endif %}
                        </small>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 分页 -->
    {% if posts.has_other_pages %}
    <nav aria-label="文章分页">
        <ul class="pagination justify-content-center">
            {% if posts.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1">首页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.previous_page_number }}">上一页</a>
            </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">
                    第 {{ posts.number }} 页，共 {{ posts.paginator.num_pages }} 页
                </span>
            </li>

            {% if posts.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.next_page_number }}">下一页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.paginator.num_pages }}">末页</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
{% else %}
    <div class="text-center py-5">
        <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
        <h4>还没有文章</h4>
        <p class="text-muted">开始写你的第一篇文章吧！</p>
        <a href="{% url 'blog:post_create' %}" class="btn btn-primary">
            <i class="fas fa-plus"></i> 写新文章
        </a>
    </div>
{% endif %}
{% endblock %}
